<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <!-- 一阶段的说法 -->
    <!-- 整个页面 => 文档 -->
    <!-- div h2 ul li  => 标签/标记/元素 -->
    <!-- 01 02 03 04   => 文本 -->
    <!-- class="wrap"  => 属性(写在标签内 和标签名以一个空格分隔 )  -->
    <!-- <li>04</li>   => 注释 -->
    <div class="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list" id="ul" title="">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <!-- <li>04</li> -->
        </ul>
    </div>
</body>
<script>
    // JS组成 
    // ECMAScript  =>ES5 (ES6)
    // BOM(Browser Object Model)   浏览器对象模型 => 提供了操作浏览器的接口和方法
    // DOM(Document Object Model)   文档对象模型 =>  提供了操作文档的接口和方法

    // window => document => html => body => ...  


    // HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素
    // 简单的来说  HTML元素的增删改查


    // 注意:  关于文档document
    // 整个html页面载入到浏览器中  变成文档的一部分
    // 通过文档可以访问页面中所有的元素 (动态地访问和更新文档的内容、结构和样式)
    console.log(document);


    // JS新增节点的概念
    // 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
    // 整个文档是一个文档节点        => document
    // 每个 HTML 元素是元素节点      => h1-h6 p div ul li span 
    // HTML 元素内的文本是文本节点    => 文本 
    // 每个 HTML 属性是属性节点      => class="" id="" title=""
    // 注释是注释节点               => 

    // 节点的本质 => 对象

    // 层级关系(节点树中的节点彼此拥有层级关系。)
    // 父节点 
    // 子节点
    // 同胞节点

    // 根节点(html)   根节点没有父节点





</script>
</html>